<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #app{
           margin:0 auto;
           padding:0;
           box-sizing:border-box;
           width:30%;
           height:50%;
           border:2px solid red;

           }
           #app>.tabs{
               display:inline-flex;
               list-style-type: none;
               border:3px solid rgb(0, 0, 0);
               }
               #app>.tabs>.per-tab{
                    border-right:1px solid black;
                   margin-right:10px;
               }
               #app>.tab-content{
                   
                   width:300px;
                   height:400px;
                   }
    </style>
</head>
<body>
    <div id="app">
        <ul class="tabs">
            <li class="per-tab" @click="toggleView('Home')">Home</li>
            <li class="per-tab" @click="toggleView('About')">About</li>
        </ul>
        <div class="tab-content">
            <component :is="view"></component>
        </div>
    </div>
    <script language="javaScript" src="../JS文件/vue.js"></script>
    <script>
      let Home = {
          template:'<p style="color:#787878;">hello world!</p>'
      }
      let About = {
          template:'<p>hello About</p>'
      }
      let vm = new Vue({
          el:'#app',
          components:{Home,About},
          data(){
              return{
                  view:'Home'
              }
          },
          methods:{
              toggleView(view){
                  this.view = view
              }
          }
      })
    </script>
</body>
</html>